<template>
  <div id="login">  
      
     
       <div class="box">
          <div class="box_left">
               <img src="@/assets/images/login_new_bg.png" class="imgbg"  />
               <img src="@/assets/images/login_line.png" style="height:100%;margin-left:50px;"  />
          </div>
          <div class="box_right">
              <img src="@/assets/images/login_line1.png" style="height:100%;position: absolute;right:310px;z-index: 1;"  />
              <img src="@/assets/images/login_line2.png" style="height:45%;position: absolute;left: 20px;z-index: 1;top:0px;"  />
              <div class="con1">
                  
                  <div class="right_title">
                     <img src="@/assets/images/login_bg1.png" style="width:40px;height:40px;" />
                     <div style="fong-size:14px;padding-left:20px;"> 管理系统登录</div>
                  </div>
                  <div class="list">
                      <input v-model="user.account" placeholder="请输入账号" />
                  </div>
                  <div class="list">
                      <input v-model="user.password" placeholder="登录密码" />
                  </div>
                  <div class="list">
                      <input v-model="user.smscode" placeholder="手机验证码" />
                      <button class="code_but" @click="getCode()" :disabled="disabled">{{ codeText }}</button>
                  </div>
                  <!-- <div class="wjmm">忘记密码</div> -->
                  <div class="button" @click="doLogin">登录</div>
               </div>
          </div>
       </div>
     
  </div>
</template>

<script>

export default {
  name: 'login',
  data () {
    return {
        user:{
          account:'',
          password:'',
          smscode:'',
        },
        my_token:'',
        codeText:'获取验证码',
        totalTime:60,
        disabled:false,
        nav:[{
          name: '权限管理',
          class: 'el-icon-con1',
          cid:1,
          show: true,
          list: [{
            name: '权限管理',
            url: '/index/jurisdictionall',
            show: true,
            cid:2,
          }]
        },{
          name: '运营数据',
          class: 'el-icon-con8',
          cid:3,
          show: true,
          list: [{
            name: '总体数据',
            url: '/index/operationdata/population/index',
            show: true,
            cid:4,
          },{
            name: '监控数据',
            url: '/index/operationdata/monitor/index',
            show: true,
            cid:5,
          },{
            name: '分析数据',
            url: '/index/operationdata/index',
            show: true,
            cid:6,
          }]
        },{
          name: '用户管理',
          class: 'el-icon-con1',
          cid:7,
          show: true,
          list: [{
            name: '用户管理',
            url: '/index/consumer',
            show: true,
            cid:8,
          }]
        },{
          name: '订单管理',
          class: 'el-icon-con5',
          cid:9,
          show: true,
          list: [{
            name: '果种订单',
            url: '/index/exchangeorder1',
            show: true,
            cid:10,
          },{
            name: '果米订单',
            url: '/index/exchangeorder',
            show: true,
            cid:11,
          },{
            name: '收获订单',
            url: '/index/receivingorder',
            show: true,
            cid:12,
          },{
            name: '果种售后',
            url: '/index/thaw',
            show: true,
            cid:13,
          }]
        },{
          name: '客服售后',
          class: 'el-icon-con7',
          cid:14,
          list: [{
            name: '解冻申请',
            url: '/index/aftersale',
            show: true,
            cid:15,
          }]
        },{
          name: '团队管理',
          class: 'el-icon-con3',
          cid:16,
          show: true,
          list: [{
            name: '运营中心',
            url: '/index/operate',
            show: true,
            cid:17,
          },{
            name: '团队管理',
            url: '/index/team',
            show: true,
            cid:18,
          },{
            name: '权限设置',
            url: '/index/jurisdiction',
            show: true,
            cid:19,
          }]
        },{
          name: '内容管理',
          class: 'el-icon-con6',
          cid:20,
          show: true,
          list: [{
            name: '百果健康',
            url: '/index/infor',
            show: true,
            cid:21,
          },{
            name: '教程管理',
            url: '/index/course',
            show: true,
            cid:22,
          }]
        },{
          name: '积分管理',
          class: 'el-icon-con9',
          cid:23,
          show: true,
          list: [{
            name: '兑换管理',
            url: '/index/guomi',
            show: true,
            cid:24,
          },{
            name: '金豆券管理',
            url: '/index/coupon',
            show: true,
            cid:25,
          },{
            name: '金豆券派发',
            url: '/index/couponsell',
            show: true,
            cid:26,
          },{
            name: '功能设置',
            url: '/index/setting',
            show: true,
            cid:27,
          },{
            name: '生成果种',
            url: '/index/land',
            show: true,
            cid:28,
          }]
        },{
          name: '业务管理',
          class: 'el-icon-con2',
          cid:29,
          show: true,
          list: [{
            name: '直播间管理',
            url: '/index/room',
            show: true,
            cid:30,
          },{
            name: '信用系统',
            url: '/index/credit',
            show: true,
            cid:31,
          },{
            name: '庄园管理',
            url: '/index/manor/index',
            show: true,
            cid:32,
          },{
            name: '签到管理',
            url: '/index/sign',
            show: true,
            cid:33,
          },{
            name: '活动管理',
            url: '/index/activity/index',
            show: true,
            cid:34,
          },{
            name: '果种挂卖',
            url: '/index/exchangguamai',
            show: true,
            cid:35,
          }]
        }],
        select_arr:[ 3, 4, 5, 6, 10, 9],
        url:'',
    }
  },
   components:{

  },
  created(){
    this.list_fun()
    
  },
  mounted (){
    
  },
  methods: {
    list_fun(){
            for(let item of this.nav) {
                if( this.select_arr.indexOf(item.cid) == -1){
                    item.show = false
                }else{
                     item.show = true
                }
                for(let a of item.list) {
                   if( this.select_arr.indexOf(a.cid) != -1){
                         this.url = a.url
                         return false
                    }
                //  console.log(this.select_arr.indexOf(a.cid))
                }
            }
            console.log(this.url,"ffffttt")
    },
    getCode(){
       let than =this
      
      // than.disabled = true
      // if(this.user.account == ''){
      //        than.disabled = false
      //       this.open1('账号不能为空','warning')   
      // }else{
          
      //   this.post("/account/getSmsCodeForLogin", {
			// 		account:this.user.account,
      //   }).then(res => {
      //      // console.log(res) 
      //        this.open1('发送成功','success')   
      //       than.disabled = true
      //       var codeText = this.codeText
      //       var clock = setInterval(function() {
      //         than.totalTime--
      //         than.codeText = than.totalTime + 's'
      //         if (than.totalTime == 1) {
      //           clearInterval(clock);
      //           than.codeText = codeText
      //           than.totalTime = 60
      //           than.disabled = false
      //         }
      //       }, 1000)

      //   })

      // }

     
       this.post("account/isExist", {  //判断是否有此用户
					account:this.user.account,
        }).then(res => {
          
             if(res.error_code == 0){
                
               if(res.result == false){
                    this.open1('用户不存在','warning')   
               }else if(res.result == true){
                    than.disabled = true
                    this.post("/account/getSmsCodeForLogin", {
                        account:this.user.account,
                      }).then(res => {
                        // console.log(res) 
                          this.open1('发送成功','success')   
                          than.disabled = true
                          var codeText = this.codeText
                          var clock = setInterval(function() {
                            than.totalTime--
                            than.codeText = than.totalTime + 's'
                            if (than.totalTime == 1) {
                              clearInterval(clock);
                              than.codeText = codeText
                              than.totalTime = 60
                              than.disabled = false
                            }
                          }, 1000)

                      })

               }
              

              }else{
                this.open1(res.message,'warning')   
              }

        })
           
            

  },

 doLogin(){

  
      this.post("/account/login", {
					account:this.user.account,
          password:this.user.password,
          smscode:this.user.smscode
		 }).then(res => {
          //console.log(res) 
          if(res.error_code == 0){

              this.$store.commit('up_my_username',this.user.account)  //在vuex中记录登录手机号

            
             this.my_token = res.result 
            //  localStorage.setItem('my_token_fen',this.my_token)

             sessionStorage.setItem("session_token",this.my_token)

             this.$router.push(this.url)

             this.open1('登录成功','success')  //提示框

          }else{
             this.open1(res.message,'warning')   
          }
         
    })

      
       
    }
  }
}
</script>


<style scoped>
button:focus{outline:0;} 
#login{
  width: 100%;
  height: 100%;
}

.box{
   height: 100%;
   display: flex;  
   background: linear-gradient(90deg, #F4F5F9, #DDE5F8);
}
.box_left{
   flex: 1;
   display: flex;
   height: 100%;
   align-items: center;
}
.imgbg{
   width: 580px;
   height: 690px;
}
.box_right{
   /* flex: 1; */
   display: flex;
   padding-right:300px;
   height: 100%;
   align-items: center;
   justify-content: center;
   position: relative;
}
.con1{
  /* padding:30px 30px 50px 30px; */
  /* width: 32%; */
  padding:30px;
  width: 310px;
  height: 410px;
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 4px 20px 0px rgba(114, 147, 225, 0.2);
  border-radius: 6px;
  position: relative;
  z-index: 3;

}
.right_title{  
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  display: flex;
    align-items: center;
}
.list{
  height:50px;
    width: 100%;
    display: flex;
    margin-top: 30px;
}
.list>input{
  flex: 1;
  height: 100%;
  background: #F6F4F5;
  border-radius: 10px;
  border: none;
  padding:0px 15px;
  color:#999999;
  font-size: 14px;
  font-weight: bold;
}
input:focus{border: none;outline:none;}
.code_but{
  height: 47px;
  width: 100px;
  line-height: 47px;
  border-radius: 5px;
  margin-left: 10px;
  /* background: linear-gradient(90deg,  #F5CF49, #F3C066); */
  background: #303BF2;
  box-shadow: 0px 4px 6px 0px rgba(246, 189, 34, 0.2);
  color:white;
  font-size: 14px;
  text-align: center;
  border:none;
}
.button{
  width: 100%;
  height: 50px;
  background: linear-gradient(90deg, #F5CF49, #F3C066);
  box-shadow: 0px 18px 17px 0px rgba(246, 189, 34, 0.2);
  border-radius: 2px;
  margin: auto;
  color:white;
  font-size: 14px;
  text-align: center;
  line-height: 50px;
  border-radius: 50px;
  margin-top: 50px;
}
.jb_img{
  position: absolute;
    bottom: -34px;
    left: -33px;
}
.jb_img1{
  position: absolute;
    top: -34px;
    right: -33px;
}
</style>
